import React, { Component } from 'react';
import GoBack from '../components/GoBack';
import { FenleiApi } from '../request/api'
import './practice.less'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'



class Practice extends Component {
  state = {

    mas: 'all',//all  全部, err   错误, done 已做, notdone 没做
    // 当前学科数组
    testArr: [
      { key: 'all', cn: '全部' },
      { key: 'err', cn: '错误' },
      { key: 'done', cn: '已做' },
      { key: 'notdone', cn: '未做' },
    ],
    // 题目分类数组
    fenleiArr: [
      { key: 'all', value: 24, sort: 0, cn: '全部' },
      { key: 'qa', value: 12, sort: 0, cn: '问答' },
      { key: 'code', value: 1, sort: 0, cn: '单选' },
      { key: 'one', value: 5, sort: 0, cn: '判断' },
      { key: 'check', value: 2, sort: 0, cn: '编程' },
      { key: 'many', value: 4, sort: 0, cn: '多选' },
    ],
    // 题目类型
    fenleiActive: 'all',
    // 做题数组
    myActive: 5,

    // z做题数量素组
    myarr: [5, 10, 20, 30, 50, 100]
  }

  changTest = (key) => {
    this.setState({ mas: key }, () => {
      this.setDataFn()
    })
  }
  // 功能未开放
  getExt = () => {
    this.props.showAlert();
    setTimeout(() => {
      this.props.hideAlert();
    }, 2000)
  }
  // 跳转做题页
  goExam = () => {
    this.props.history.push({
      pathname: '/exam', state: {
        testNum: this.state.myActive,
        testType: this.state.mas,
        actionCode: this.props.match.params.actionCode,
        questionType: this.state.fenleiActive
      }
    })
  }
  render() {
    return (
      <div className='practice'>
        <div className="top">
          <div className="btn btn1" onClick={this.goExam}>进入考试练习</div>
          <div className="btn btn2" onClick={this.getExt}>进入考试模式</div>
        </div>
        <div className="title">当前学科</div>
        <ul className='list'>

          {this.state.testArr.map(item => (
            <li key={item.key} className={this.state.mas === item.key ? 'active' : ''} onClick={this.changTest.bind(this, item.key)} >{item.cn}</li>
          ))}

        </ul>
        <div className="title">题目类型</div>
        <ul className='list'>

          {this.state.fenleiArr.map(item => (
            <li key={item.key} className={this.state.fenleiActive === item.key ? 'active' : ''} onClick={() => this.setState({ fenleiActive: item.key })}>{item.cn}({item.value})</li>
          ))}

        </ul>
        <div className="title">做题数量</div>
        <ul className='list'>

          {this.state.myarr.map((item, index) => (
            <li key={index} className={this.state.myActive === item ? 'active' : ''} onClick={() => this.setState({ myActive: item })}>{item}</li>
          ))}

        </ul>
        <GoBack history={this.props.history} />
      </div>
    );
  }
  setDataFn() {
    let actionCode = this.props.match.params.actionCode;
    FenleiApi({
      actionCode,
      testType: this.state.msg
    }).then(res => {
      console.log(res)
      let arr = res.data;
      arr.forEach(item => {
        switch (item.key) {
          case 'all':
            item.cn = '全部';
            break;
          case 'qa':
            item.cn = '问答';
            break;
          case 'code':
            item.cn = '编程';
            break;
          case 'one':
            item.cn = '单选';
            break;
          case 'check':
            item.cn = '判断';
            break;
          case 'many':
            item.cn = '多选';
            break;
          case 'fill':
            item.cn = '填空';
            break;
          default:
            break;
        }
      })
      if (res.errCode === 0) {
        this.setState({ fenleiArr: arr }, () => {
          console.log(arr)
        })
      }
    })
  }
  componentDidMount() {//获取actionCode的参数
    console.log(this.props.match.params.actionCode)
    this.setDataFn()

  }
}
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    showAlert() {
      dispatch({
        type: 'showAlert', value: {
          alertType: 'warning',
          alertContent: '该功能暂未开放'
        }
      })
    },
    hideAlert() {
      dispatch({ type: 'hideAlert' })
    }
  }
}

export default connect(null, mapDispatchToProps)(withRouter(Practice));